import MarkdownEditor from "@uiw/react-md-editor";

import { useState } from "react";

const Markdown = () => {
  const [markdown, setMarkdown] = useState("");

  const onChange = (value, viewUpdate) => {
    setMarkdown(value);
  };

  return (
    <div>
      <h1>Markdown editor</h1>
      <MarkdownEditor
        value={markdown}
        height="600px"
        preview="edit"
        onChange={onChange}
        data-color-mode="light"
      />
      <div className="text">
        <MarkdownEditor.Markdown
          source={markdown}
          wrapperElement={{
            "data-color-mode": "light",
          }}
        />
      </div>
    </div>
  );
};

export default Markdown;
